<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>APP用户统计</title>
    <script src = "https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id = 'homework' style='width: 600px;height:400px'></div>
<script type = text/javascript>
    var myCharts = echarts.init(document.getElementById('homework'));
    var option = {
        title: {
            text: '标签人数分布', x: 'left', y: 'top',
            subtext: '共190,633人', subtextStyle: {fontSize: 15, fontWeight: '15', color: 'black'}
        },
        legend:{name:'vertical'},
        tooltip: {trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
            showDelay: 10,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
            hideDelay: 10,             // 隐藏延迟，单位ms
            transitionDuration : 0.4,  // 动画变换时间，单位s
            borderColor: '#fdfffb',       // 提示边框颜色
            borderRadius: 4,           // 提示边框圆角，单位px，默认为4
            borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
            padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，
                                       // 接受数组分别设定上右下左边距，同css
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow',         // 默认为直线，可选为：'line' | 'shadow'
                lineStyle : {          // 直线指示器样式设置
                    color: 'black',
                    width: 2,
                    type: 'shadow'     // solid
                },
                shadowStyle : {                       // 阴影指示器样式设置
                    width: 'auto',                   // 阴影大小
                    color: 'rgba(150,150,150,0.3)'  // 阴影颜色
                }
            },
            textStyle: {
                color: '#fff'
            }
        },
        yAxis:{type:'category'},
        xAxis:{},
        dataset: {
            source: [
                ['流失用户', 183472],
                ['回流用户', 6546],
                ['连续活跃用户', 524],
                ['新用户', 91],
                ['活跃用户', 0]
            ]},

        series:[
            {name:'用户人数',type:'bar',encode:{x:1, y:0}}
        ]
    };

        myCharts.setOption(option);


</script>

</body>
</html>